<script setup>
import { ref, computed, provide } from "vue";
import Container from "../component/Content/Container.vue";
import EditEvent from "../component/Events/EditEvent.js";

const PageEvent = new EditEvent();
provide("PageEvent", PageEvent);

const LayoutState = ref({
  Left: {
    width: 520,
    state: true,
    mark: true,
    type: "left",
    offset: [50, 0],
    limit: [250, 500],
  },
  Right: {
    width: 320,
    state: true,
    mark: true,
    type: "right",
    offset: [0, 0],
    limit: [200, 500],
  },
});

const LayoutStyle = function (type) {
  if (!LayoutState.value[type].state || !LayoutState.value[type].mark) {
    return type == "Left" ? "50px" : "0";
  } else {
    return LayoutState.value[type].width + (type == "Left" ? 50 : 0) + "px";
  }
};
</script>
<template>
  <div class="Header"></div>
  <div class="Content">
    <div class="Menu"></div>
    <Container v-model:Options="LayoutState.Left" class="Left">
      <div>Left</div>
    </Container>
    <Container v-model:Options="LayoutState.Right" class="Right">
      <div>Right</div>
    </Container>
    <div
      class="ContentTools"
      :style="{
        left: LayoutStyle('Left'),
        right: LayoutStyle('Right'),
      }"
    ></div>
    <div
      class="ContentBody"
      :style="{
        left: LayoutStyle('Left'),
        right: LayoutStyle('Right'),
      }"
    >
      <iframe class="ContentPage" src="/Content" frameborder="0"></iframe>
    </div>
  </div>
</template>
<style scoped lang="less">
.Part-Title {
  height: 48px;
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  .Close {
    padding: 0 8px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    width: 48px;
    cursor: pointer;
  }
  .Title {
    line-height: 48px;
    display: flex;
    .Ding {
      padding: 0 16px;
    }
  }
}
.ContentTools {
  height: 48px;
  position: absolute;
  top: 0;
  border-bottom: 1px solid #ccc;
}
.Header {
  height: 48px;
  line-height: 48px;
  border-bottom: 1px solid #ccc;
}
.Menu {
  width: 50px;
  height: 100%;
  background-color: #ccc;
}
.Content {
  position: absolute;
  top: 48px;
  bottom: 0;
  left: 0;
  right: 0;
  .ContentBody {
    position: absolute;
    bottom: 0;
    top: 48px;
    z-index: 10;
    padding: 10px;
  }
  .ContentPage {
    width: 100%;
    height: 100%;
    background-color: #aaa;
  }
  .Left {
    position: absolute;
    top: 0;
    left: 50px;
    height: 100%;
    width: 320px;
    border-right: 1px solid #ccc;
  }
  .Right {
    position: absolute;
    width: 320px;
    right: 0;
    height: 100%;
    top: 0;
    border-left: 1px solid #ccc;
  }
}
</style>